<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改css</title>
		<style>
			p{
				font-size: 19px;
			}
			.c{
				font-size: 65px;
				background-color: pink;
				border: 5px outset red;
				text-align: center;
			}
		</style>
		<script>
			function changeCss(){
				let p=document.querySelector("p");
				//p.setAttribute("class","c");
				p.className="c";
				
				// p.style.fontSize="60px";
				// p.style.backgroundColor="pink";
				// p.style.border="4px solid red";
				// p.style.textAlign="center";
			}
			function changeFont(){
				let p=document.querySelector("p");
				//alert(p.style.fontSize);//行内样式
				let f=(document.defaultView.getComputedStyle(p,null)||p.currentStyle).fontSize;
				//alert(f);
				 f=parseInt(f);
				 p.style.fontSize=(f+2)+"px";
			}
		</script>
	</head>
	<body>
		<p>
			教育改变生活
		</p>
		<button onclick="changeCss()">修改样式</button>
		<button onclick="changeFont()">改变字体大小</button>
	</body>
</html>